<template>
	<view>
		<h1>智慧城市</h1>
		<u-form ref="uForm" :model="form">
			<u-form-item label="账号" prop="username">
				<u-input v-model="form.username"></u-input>
			</u-form-item>
			<u-form-item label="密码" prop="password">
				<u-input v-model="form.password"></u-input>
			</u-form-item>
		</u-form>
		<navigator url="/pages/register/register" class="toRegister">
			<text>没有账号,点击注册</text>
		</navigator>
		<button class="login" @click="submit">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: 'http://124.93.196.45:10001/',
				form: {
					username: '',
					password: ''
				},
				rules: {
					username: [
						{
							required: true,
							message: '账号不能为空',
							trigger:[ 'blur', 'change']
						}
					],
					password: [
						{
							required: true,
							message: '密码不能为空',
							trigger: ['blur', 'change']
						}
					]
				}
			};
		},
		onLoad() {
			
		},
		methods:{
			submit(){
				this.$refs.uForm.validate(valid => {
					if(valid){
						uni.request({
							url:this.baseUrl + '/prod-api/api/login',
							method: 'POST',
							data:{
								...this.form
							},
							success: (res) => {
								if(res.data.code !== 200){
									uni.showToast({
										title:res.data.msg
									})
									console.log(res)
								}else{
									console.log(res)
									uni.setStorageSync('token', res.data.token)
									uni.showToast({
										title:'登入成功'
									})
									uni.switchTab({
										url:'/pages/index/index'
									})
								}
							}
						})
						uni.showToast({
							title:'登入成功'
						})
					}else{
						uni.showToast({
							title:'登入失败'
						})
					}
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss">
view{
	padding: 20rpx;
	position: relative;
	h1{
		color: #2979ff;
		text-align: center;
	}
	.toRegister{
		color: #2979ff;
		position: absolute;
		right: 30rpx;
		font-size: 22rpx;
	}
	.login{
		width: 180rpx;
		height: 80rpx;
		background-color: #2979ff;
		color: white;
		margin-top: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}
</style>
